<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>首页</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.picker.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../css/mui.poppicker.css" />
		<style type="text/css">
		  .mui-bar{
		    background-color: transparent;
		    /* color: #fff; */
		  }
		  .mui-bar .icon-xiaoxi{
		    position: relative;
		  }
		  .searDiv{
		    padding-top: 44px;
		  }
		  .header{
		    width: 100%;
		    height: 150px;
		    position: fixed;
		    top: 0;
		    background-size: 100%;
		    z-index: 111;
        background-color: #0082E6;
		  }
		  .search{
		    /* background-color: #fff; */
		    border-radius: 25px; 
		    overflow: hidden;
        border:1px solid #B5B5B5;
		    position: relative;
		    
		  }
		  .mui-content{
		    padding-top: 150px;
		  }
		  .mui-input-row .mui-btn+input, .mui-input-row label+input, .mui-input-row:last-child{
		    background: #fff;
		  }
		  .mui-search{
		    background: #fff;
		    /* border-radius: 25px; */
		    overflow: hidden;
		    float: left;
		    width: 90%;
		  }
		  .mui-search input{
		    background-color: #fff;
		    text-align: left;
		    
		    margin-bottom: 0;
		    border-radius: 20px;
		  }
		  .mui-search .mui-placeholder{
		    text-align: left;
		    padding-left: 4px;
		  }
		  .search .code{
		    width: 10%;
		    background-color: #fff;
		    display: inline-block;
		    height: 34px;
		    line-height: 34px;
		    color: #333;
		    font-size: 20px;
		  }
		  .mui-search:before
		  {
		  
		      margin-top: -10px;
		  
		      content: '\e466';
		  }
		  .homeContent{
		    margin-top: 20px;
		  }
      .searchHistory{
        padding: 20px 0;
      }
      .searchHistory span{
        background:#F4F4F4;
        color: #6D6D6D;
        display: inline-block;
        font-size: 0.8rem;
        padding: 4px 15px;
        margin-right: 6px;
        margin-bottom: 6px;
        border-radius: 4px;
      }
      .fixed-title {
        width: 100%;
        background: #CFD8DE;
        /* padding: 4px 0; */
        display: flex;
        margin-top: 15px;
      }
      
      .fixed-title span {
        display: inline-block;
        width: 50%;
        padding: 6px 10px;
        font-size: 0.8rem;
        text-align: center;
        box-sizing: border-box;
      }
      .list {
        display: flex;
        position: relative;
        padding: 5px 0;
      }
      
      .list::after {
        position: absolute;
        content: '';
        height: 1px;
        background-color: #EEEEEE;
        bottom: 0;
        left: 10px;
        right: 10px;
      }
      
      .list>div {
        width: 50%;
        padding: 6px 10px;
        font-size: 16px;
        text-align: left;
        box-sizing: border-box;
        font-size: 14px;
      }
		</style>
	</head>
	<body class="bg-white">
    <div id="container">
      <div class="header">
        <header class="mui-bar mui-bar-nav">
            <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left text-white"></a>
            <h1 class="mui-title">搜索</h1>
        </header>
        <div class="searDiv flex margin-lr margin-top">
          <div class="search flex-sub margin-right-sm">
            <div class="mui-input-row mui-search">
              <input type="search" class="mui-input-clear" placeholder="请输入关键字搜索" v-model="query" ref="input" @focus="focus" id="search"/>
            </div> 
            <a id="scan" href=""class="iconfont icon-saoyisao1 code"></a>
          </div>
          <button type="button" class="mui-btn mui-btn-primary" @click="search()">搜索</button>
        </div>
        <div class="fixed-title" v-if="show">
          <span>设备名称</span>
          <span>功能位置编码</span>
        </div>
      </div> 
      <div class="bg-white"style="position: absolute; width:100%; top: 120px; z-index: 999;bottom: 0;" v-if="!show">
        <div class="padding-lr">
          <div class="flex justify-between">
            <div class="text-df">搜索历史</div>
            <div class=""@click="remove()"><span class="iconfont icon-shanchu1"style="font-size: 20px;"></span></div>
          </div>
          <div class="searchHistory">
            <p class="text-grey mui-text-center" v-if="searchHistory.length===0">暂无搜索历史</p>
            <span v-for="item in searchHistory" @click="searchItem(item)">{{item}}</span>
          </div>
        </div>
        
      </div>
      <div id="refreshContainer" class="mui-content mui-scroll-wrapper bg-white">
        <div class="mui-scroll" v-if="show">
          <div class="list align-center" @click="detail(item)" v-for="item in list" >
            <div>{{item.deviceName}}（{{item.areaNames}}）</div>
            <div>{{item.mdmCode}}</div>
            <!-- <div>9</div> -->
            <!-- <div class="arrow">{{item.projectNames}}</div> -->
          </div>
        </div>
      
      </div>
    </div>
    <script src="../../../js/mui.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/mui.picker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.poppicker.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../../js/mui.dtpicker.js"></script>
	<script src="../../../js/mk"></script>
    <script src="../js/sqlite.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
    <script type="text/javascript">
      mui.init()
      var searchVM = null; // 列表实例
      var size = 10;
      var page = 0;
      mui.init({
        pullRefresh: {
          container: "#refreshContainer", //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
          down: { //下拉刷新
            style: 'circle',
            height: 50, //可选,默认50.触发下拉刷新拖动距离,
            auto: false, //可选,默认false.首次加载自动下拉刷新一次
            contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
            contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
            contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              // page = 0;
              // load(page);
              ////没有更多内容了，endPulldown 传入true， 不再执行下拉刷新
              mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
              // countDown++;
            }
          },
          up: { //上拉加载
            height: 50, //可选.默认50.触发上拉加载拖动距离
            auto: false, //可选,默认false.自动上拉加载一次
            contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
            contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
            callback: async function() { //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
              /*每次加载动态的添加一个li*/
              // $("#testUl").append($("<li>" + new Date() + "</li>"));
              this.endPullupToRefresh(false)
              page++;
              load(page);
            }
          }
        }
      });
      searchVM = new Vue({
        el: "#container",
        data: {
          list: [],
          searchHistory:[],
          i: 5,
          query:'',
          show:false
          
        },
        created: function() {
          console.log(localStorage.getItem('history'))
          if(localStorage.getItem('history')){
            this.searchHistory= JSON.parse(localStorage.getItem('history'))
          }
        },
        methods: {
          focus(){
            this.show=false
          },
		  setQuery:function(query){
			  this.query = query;
			  this.$refs.input.focus();
		  },
          detail: function(item) {
            mui.openWindow({
              url: '../file/fileDetail.html',
              id: '../file/fileDetail.html',
              extras: {
                pageId: item.id
              }
            })
          },
          search:function(){
            var that=this
			var sh = that.searchHistory;
			var sflag = true;
            console.log(that.searchHistory)
            var query = that.query
            if(query.trim()==''){
              mui.toast('请输入关键字搜索');
              return
            }
			for (var i = 0; i < sh.length; i++) {
				if(sh[i] == query.trim()){
					sflag = false;
					break;
				}
			}
			if(sflag){
				that.searchHistory.push(query)
			}
            localStorage.setItem("history",JSON.stringify(that.searchHistory));
            page=0
            load(page)
          },
          remove() {
            console.log('删除')
            var that=this
            if(that.searchHistory.length===0){
              mui.toast('您还没有搜索历史');
              return;
            }
            var btnArray = ['取消', '确认'];
            mui.confirm('确定删除吗？', '提示', btnArray, function(e) {
              if (e.index == 1) {
                localStorage.removeItem("history");
                that.searchHistory=[]
              } else {
                // info.innerText = 'MUI没有得到你的认可，继续加油'
              }
            })
            
          },
          searchItem(item){
            var that=this
            that.query=item
            that.$refs.input.focus()
          }
         
        }
      })
      mui("body").on("tap", ".mui-icon-clear", function() {
        searchVM.query=''
      })
      document.getElementById("search").addEventListener("keypress",function(event) {
          if(event.keyCode == "13") { 
              var query = searchVM.query
              if(query.trim()==''){
                mui.toast('请输入关键字搜索');
                return
              }
              document.activeElement.blur();//收起虚拟键盘
              page=0;
              load(page);
              event.preventDefault(); // 阻止默认事件---阻止页面刷新
          }
      });
      function load(page) {
        if(page===0){
          plus.nativeUI.showWaiting('加载中...');
        }
        let sort = "updateDate,desc";
        mui.baseApp.httpRequst("/api/metadataDocument", {
          page: page,
          size: 10,
          isTemplate: false,
          sort: 'updateDate,desc',
          query:searchVM.query
        }, function(data) {
          plus.nativeUI.closeWaiting()
          if (page == 0) {
            searchVM.list = []
          }
          searchVM.show=true
          searchVM.list = searchVM.list.concat(data.records)
          console.log('设备档案数据' + JSON.stringify(data))
          //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
		  if(data.records.length  === 0){
			  mui('#refreshContainer').pullRefresh().options.up.contentnomore = "暂无数据";
			  mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
			  mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
		  }else{
			  mui('#refreshContainer').pullRefresh().options.up.contentnomore = "没有更多数据了";
			  if (data.records.length < size) { //
			    mui('#refreshContainer').pullRefresh().enablePullupToRefresh();
			    mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //参数为true代表没有更多数据了。
			    return;

			  } else {
			    mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); //参数为true代表没有更多数据了。
			    mui('#refreshContainer').pullRefresh().enablePullupToRefresh(); //启用上拉加载
			  }
		  }
        }, function(err) {
			console.log(err);
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      mui.back = function(){
          //显示上一个界面；  
         var self = plus.webview.currentWebview();
         var opener = self.opener(); 
         //继续当前页面原有返回逻辑  
         mui.fire(opener, 'back', {});
      }
	  
	  document.querySelector('#scan').addEventListener('tap', function() {
	    	mui.openWindow({
	    		id: "coder.html",
	    		url: "coder.html",
	    		waiting: {
	    			autoShow: false, //自动显示等待框，默认为true
	    		}
	    	});
	    })
	   mui.plusReady(function() {
	     var self = plus && plus.webview.currentWebview();
	     if(self && self.scan){
	  	    console.log("扫描的数据");
	  		console.log(self.scan);
	  	   searchVM.setQuery(self.scan);
	  	   searchVM.search();
	     }
	   });
	  
	  // 扫码完成后触发事件
	  window.addEventListener("searchScan", function(e) {
	  	// 触发搜索刷新
	  	searchVM.setQuery(e.detail.scan);
	  	searchVM.search();
	  });
    </script>
	</body>
</html>
